<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="orderQuery.userIdFrom" placeholder="捐赠人ID"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="orderQuery.userIdTo" placeholder="受捐人ID"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="orderQuery.orderType" clearable placeholder="审核状态">
          <el-option :value="0" label="进行中"/>
          <el-option :value="1" label="已完成"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!--  列表  -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center">

      </el-table-column>

      <el-table-column
        prop="userIdFrom"
        label="捐赠人ID"
        width="200"
        align="center">

      </el-table-column>

      <el-table-column
        prop="userIdTo"
        label="受捐人ID"
        width="200"
        align="center">

      </el-table-column>

      <el-table-column
        label="寄物地址"
        width="150"
        align="center">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="getFromAddress(scope.row.addIdFrom)">
            地址
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="收货地址"
        width="150"
        align="center">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="getToAddress(scope.row.addIdTo)">
            地址
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        label="捐赠物品"
        width="150"
        align="center">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="getGoodsInfo(scope.row.goodsId)">
            详情
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="orderType"
        label="订单状态"
        width="150"
        align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderType===0" type="info">
            进行中
          </el-tag>
          <el-tag v-if="scope.row.orderType===1" type="success">
            已完成
          </el-tag>
        </template>

      </el-table-column>

      <el-table-column
        prop="gmtCreate"
        label="创建时间"
        width="170"
        align="center">
      </el-table-column>

      <el-table-column label="快递单号" width="170" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit"
                     @click="dialogAddExpress(scope.row.orderId,scope.row.expressId)">查看
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="289" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" :disabled="scope.row.orderType>0"
                     @click="dialogChangeTypeMe(scope.row.orderId,scope.row.userIdFrom,scope.row.userIdTo)">更改状态
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--    寄货地址展示表单  -->
    <el-dialog
      title="寄货地址"
      :visible.sync="dialogTableFrom"
      width="30%">
      <el-form ref="form" :model="addressFrom" label-width="80px">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="addressFrom.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addressFrom.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="addressFrom.province" disabled></el-input>
        </el-form-item>
        <el-form-item label="直辖市" prop="city">
          <el-input v-model="addressFrom.city" disabled></el-input>
        </el-form-item>
        <el-form-item label="行政区" prop="district">
          <el-input v-model="addressFrom.district" disabled></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="addressFrom.address" disabled></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!--    收货地址展示表单  -->
    <el-dialog
      title="收货地址"
      :visible.sync="dialogTableTo"
      width="30%">
      <el-form ref="form" :model="addressFrom" label-width="80px">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="addressFrom.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addressFrom.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="addressFrom.province" disabled></el-input>
        </el-form-item>
        <el-form-item label="直辖市" prop="city">
          <el-input v-model="addressFrom.city" disabled></el-input>
        </el-form-item>
        <el-form-item label="行政区" prop="district">
          <el-input v-model="addressFrom.district" disabled></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="addressFrom.address" disabled></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!--  物品信息展示  -->
    <el-dialog
      title="物品信息"
      :visible.sync="dialogGoods"
      width="30%">
      <el-form ref="form" :model="goods" label-width="80px">

        <el-form-item label="图片" prop="picture">
          <img :src="goods.picture" class="el-form-item" width="400"/>

        </el-form-item>
        <el-form-item label="捐赠者ID" prop="name">
          <el-input v-model="goods.userId"></el-input>
        </el-form-item>
        <el-form-item label="物品名称" prop="name">
          <el-input v-model="goods.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="物品描述" prop="phone">
          <el-input v-model="goods.goodsDesc" disabled></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!--    修改状态提示   -->
    <el-dialog
      title="提示"
      :visible.sync="dialogChangeType"
      width="30%">
      <span>确认修改订单状态为已完成？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogChangeType = false">取 消</el-button>
    <el-button type="primary" @click="changeType">确 定</el-button>
  </span>
    </el-dialog>

    <!--    修改快递单号提示   -->
    <el-dialog
      title="添加/修改快递单号"
      :visible.sync="dialogAddExp"
      width="30%">
      <el-input v-model="orderExp.expressId" placeholder="请输入快递订单号"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogAddExp = false">取 消</el-button>
    <el-button type="primary" @click="addExpress">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>

import order from '@/api/wd/order'

export default {
  data() {
    return {
      list: null,
      page: 1,//当前页
      limit: 10,//每页记录数
      total: 0,//总记录数,
      dialogTableFrom: false,
      dialogTableTo: false,
      dialogGoods: false,
      dialogChangeType: false,
      dialogAddExp: false,
      srcList: [], //放大图片容器
      orderQuery: {},
      addressFrom: {
        addId: "",
        name: "",
        phone: "",
        province: "",
        city: "",
        district: "",
        address: ""
      },
      goods: {},
      orderType: {
        userIdFrom: "",
        userIdTo: "",
        orderId: "",
        orderType: ""
      },
      orderExp: {
        orderId: "",
        expressId: ""
      }

    };
  },
  created() { //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.page = page
      order.getOrderList(this.page, this.limit)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    //带条件查询
    searchList(page = 1) {
      this.page = page
      order.searchOrderList(this.page, this.limit, this.orderQuery)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    resetData() {
      this.orderQuery = {}
      this.getList()
    },
    //寄货地址
    async getFromAddress(addIdFrom) {
      this.addressFrom = {}
      this.dialogTableFrom = true
      const res = await order.getFromAddress(addIdFrom)
      this.addressFrom = res.data.address
    },
    //收货地址
    async getToAddress(addIdTo) {
      this.addressFrom = {}
      this.dialogTableTo = true
      const res = await order.getToAddress(addIdTo)
      this.addressFrom = res.data.address
    },
    //打开订单状态提示表单
    async dialogChangeTypeMe(orderId, userIdFrom, userIdTo) {
      this.dialogChangeType = true
      this.orderType = {}
      this.orderType.orderId = orderId
      this.orderType.userIdFrom = userIdFrom
      this.orderType.userIdTo = userIdTo
      this.orderType.orderType = "1"
    },
    //修改订单状态
    async changeType() {
      this.dialogChangeType = false
      const res = await order.updateOrderType(this.orderType)
      if (res.code == "20000") {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      }
      this.getList()
    },
    //物品信息
    async getGoodsInfo(goodsId) {
      this.goods = {}
      this.dialogGoods = true
      const res = await order.getOneGoods(goodsId)
      this.goods = res.data.goods
      console.log(res.data.goods.picture)
    },
    //添加或查询快递单号
    dialogAddExpress(orderId, expressId) {
      this.dialogAddExp = true
      this.orderExp.expressId = expressId
      this.orderExp.orderId = orderId
    },
    async addExpress() {
      this.dialogAddExp = false
      const res = await order.addOrderExp(this.orderExp)
      if (res.code == "20000") {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      }
      this.getList()
    }


  }
}
</script>
